<template>
    <div class="body">
        <!-- 标题栏 -->
        <van-nav-bar title="当前城市" left-arrow fixed placeholder z-index="3"/>
        <!-- 搜索框 -->
        <van-search
            v-model="value"
            show-action
            placeholder="输入城市名或拼音"
            @cancel="onCancel"
            @keydown="onSearch"
            class="search"
            shape="round"
        />
        <!-- 判断是否在搜索城市 -->
        <div v-if="cityList.length === cityListCopy.length">
            <!-- 热门城市 -->
        <div class="hotcity" >
        <span > 热门城市</span>
        <van-grid :column-num="3" border gutter="20">
        <van-grid-item v-for="item in HotCity()" :key="item.cityId"  :text="item.name" class="cityname" @click="handOnClick(item)"/>
        </van-grid>
        </div>
        <!-- 城市列表 -->
        <van-index-bar v-if="cityList.length >0" :sticky-offset-top="100" class="cityBar">
        <div v-for="item in CityData()" :key="item.index">
        <van-index-anchor :index="item.index"  />
        <!-- 城市名 -->
        <van-cell :title="city.name" v-for="city in item.list" :key="city.cityId" @click="handOnClick(city)"/>
        </div>
        </van-index-bar>
         </div>
         <!-- 在搜索城市时显示的城市列表 -->
         <div v-else class="searchCity">
             <van-cell :title="city.name" v-for="city in cityList" :key="city.cityId" @click="handOnClick(city)" />
         </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      cityList: [],
      cityListCopy: [],
      value: '',
      timeId: null
    }
  },
  mounted () {
    axios({
      url: 'https://m.maizuo.com/gateway?k=8310476',
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16151016671203561505488897","bc":"310100"}',
        'X-Host': 'mall.film-ticket.city.list'
      }
    }).then(res => {
      this.cityList = res.data.data.cities
      this.cityListCopy = res.data.data.cities
    })
  },
  methods: {
    onSearch () {
      clearTimeout(this.timeId)
      this.timeId = setTimeout(() => {
        this.cityList = this.cityListCopy.filter(item => item.pinyin.indexOf(this.value) > -1 || item.name.indexOf(this.value) > -1)
      }, 500)
    },
    onCancel () { this.cityList = this.cityListCopy },
    handOnClick (data) {
      console.log(data)
      this.$store.commit('ChangCity', data)
      this.$router.push('/')
    }
  },
  computed: {
    CityData () {
      return () => {
        var newArr = []
        for (var i = 65; i < 91; i += 1) {
          var arr = this.cityList.filter(item => item.pinyin.substring(0, 1) === String.fromCharCode(i).toLowerCase())
          if (arr.length > 0) {
            newArr.push({
              index: String.fromCharCode(i),
              list: arr
            })
          }
        }
        return newArr
      }
    },
    HotCity () {
      return () => {
        return this.cityList.filter(item => item.isHot === 1)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.body{
    width: 100%;
    height: 100%;
    background-color: #eee;
}
.search{
    width: 100%;
    position: fixed;
    left: 0;
    top: 46px;
    z-index: 3;
    ::after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    border: 0 solid #ebedf0;
    transform: scale(.5);
}
}
.hotcity{
    margin-top: 54px;
    background-color: #fff;
    padding-bottom: 20px;
    span{
        display: block;
        margin: 10px 20px;
        color: #666;
    }
    .cityname{
    height: 35px;
    box-sizing: border-box;
    font-size: 16px;
}
}
.searchCity{
    margin-top: 54px;
}
</style>
